<template>
  <view class="page-header">
    <view v-if="headerData.back" class="icon" @click="handleBack">
      <image class="icon-logout" src="/static/icon/icon-back.svg"></image>
    </view>
    <view class="title">
      {{ title }}
    </view>
  </view>
</template>

<script>
/**
 * 主页面 - 头部
 */
export default {
  name: "page-header"
}

/**
 * 返回
 */
const handleBack = () => {
  uni.navigateBack()
}
</script>

<script setup>
import {
  ref
} from "vue"

/**
 * props传入
 */
const props = defineProps({
  headerData: {}
})

const headerData = props.headerData

/**
 * 获取当前页面标题
 */
const title = ref(headerData.text ? headerData.text : "页面")
</script>

<style>
.page-header {
  flex: 0;
  flex-basis: 88rpx;
  background-color: #007BDE;
  padding-top: var(--status-bar-height);
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;

  .icon {
    position: absolute;
    left: 30rpx;
    width: 44rpx;
    height: 44rpx;

    .icon-logout {
      width: 44rpx;
      height: 44rpx;
    }
  }

  .title {
    font-weight: 500;
    font-size: 36rpx;
    color: #ffffff;
    line-height: 50rpx;
  }
}
</style>